<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-tooltip/paper-tooltip.html">
<link rel="import" href="/ui/elements/flake_detection/flake-score-chart.html">
<link rel="import" href="/ui/elements/flake_detection/grouped-occurrences.html">


<dom-module id="flaky-test">
  <template>
    <style>
      td {
        padding: 2px;
        padding-right: 10px;
      }

      td:last-child {
        padding-right: 0px;
      }

      table th {
        padding: 2px;
        padding-right: 10px;
        text-align: left;
        height: 30px;
        background-color: #4285F4;
        color: #FFF;
      }

      paper-button {
        horizontal-align: left;
        color: #4285F4;
        float: left;
        display: table-cell;
      }

      .hidden {
          display: none;
       }

      .graph-button {
        padding: 0px;
        margin: 0px;
        color: #00f;
      }
    </style>
    <form id="occurrences_form" action="/p/chromium/flake-portal/flakes/occurrences">
        <input type="text" name="key" id="key" class="hidden" value="{{key}}">
        <input type="text" name="show_all_occurrences" id="show_all_occurrences" class="hidden" value="{{show_all_occurrences}}">
    </form>
    <table>
        <tr>
          <td>Test Name:</td>
          <td>[[flake_json.test_label_name]]</td>
        </tr>
        <tr>
          <td>Flake Score:</td>
          <td>
            <paper-button class="graph-button" on-tap="_showDialog"><u>[[flake_json.flake_score_last_week]]</u></paper-button>
            <flake-score-chart class="flake_dialog" flake={{flake_json}} weights=[[weights]]></flake-score-chart>
          </td>
        </tr>
        <template is="dom-if" if="[[_hasBug(flake_json)]]">
          <tr>
              <td>Bug:</td>
              <td>
                <a href="[[flake_json.flake_issue.issue_link]]">[[flake_json.flake_issue.issue_id]]</a>
                ([[flake_json.flake_issue.status]].
                <template is="dom-if" if="[[_hasBugUpdateTime(flake_json)]]">
                  <span>Updated [[_shortenTimeDelta(flake_json.flake_issue.last_updated_time_in_monorail)]] ago
                    <paper-tooltip position="bottom" offset="0" fit-to-visible-bounds="true">[[flake_json.flake_issue.last_updated_time_in_monorail]] ago</paper-tooltip>
                  </span>
                </template>
                )
              </td>
          </tr>
          <template is="dom-repeat" items="{{flake_json.culprits}}" as="culprit">
              <tr>
                  <template is="dom-if" if="[[_isFirstElement(index)]]">
                    <td rowspan$="[[flake_json.culprits.length]]">Culprit:</td>
                  </template>
                  <td> <a href$="[[_getCulpritPageLink(culprit.culprit_key)]]" target="_blank">[[_getCulpritIdentifier(culprit)]]</a>
              </tr>
          </template>
          <template is="dom-if" if="[[flake_json.sample_analysis]]">
              <tr>
                  <td>Sample Analysis:</td>
                  <td> <a href$="[[_getAnalysisLink(flake_json.sample_analysis.analysis_key)]]" target="_blank">[[flake_json.sample_analysis.status]]</a>
              </tr>
          </template>
        </template>
    </table>
    <paper-button noink id="btn_toggle" on-tap="togglecollapsed">
        <template is="dom-if" if="[[!collapsed]]">COLLAPSE ALL</template>
        <template is="dom-if" if="[[collapsed]]">EXPAND ALL</template>
    </paper-button>
    <paper-button noink id="show_all" on-tap="_showAllOccurrences" hidden$="[[_allOccurrencesShown()]]">MORE OCCURRENCES</paper-button>
    <br>
    <table width="100%">
      <tr>
        <th width="12%">Occurred at</th>
        <th width="8%">Flake Type</th>
        <th width="30%">Original Step Name</th>
        <th width="50%">Link to Legacy Flakiness Dashboard</th>
      </tr>
    </table>
    <template id="groups" is="dom-repeat" items="{{flake_json.occurrences}}">
      <grouped-occurrences
          group_by_field = {{item.group_by_field}}
          grouped_occurrences={{item.occurrences}}
          collapsed=[[collapsed]]>
      </grouped-occurrences>
    </template>
  </template>
  <script>
    (function () {
      "use strict";

      Polymer({
        is: "flaky-test",
        properties: {
          // Json serialization of the Flake model.
          flake_json: {
            type: Object
          },
          collapsed: {
            type: Boolean,
            value: false
          },
          key: {
            type: String
          },
          show_all_occurrences: {
            type: String
          },
          weights: {
            type: Array
          }
        },

        _hasBug: function(flake) {
          return (flake.flake_issue_key != null && flake.flake_issue != null &&
          flake.flake_issue.issue_id != null);
        },

        _hasBugUpdateTime: function(flake) {
          return (flake.flake_issue != null &&
          flake.flake_issue.last_updated_time_in_monorail != null);
        },

        _allOccurrencesShown() {
            return this.show_all_occurrences != '';
        },

        _getCulpritPageLink(culprit_key) {
            return '/p/chromium/flake-portal/analysis/culprit?key=' + culprit_key;
        },

        _getCulpritIdentifier(culprit) {
            if (culprit.commit_position) {
              return culprit.commit_position;
            }
            return culprit.revision;
        },

        _getAnalysisLink(analysis_key) {
            return '/p/chromium/flake-portal/analysis/analyze?key=' + analysis_key;
        },

        _isFirstElement: function (index) {
           return index == 0;
        },

        _shortenTimeDelta: function (delta) {
          return shortenTimeDelta(delta);
        },

        // Event handlers.
        togglecollapsed: function (e) {
          this.collapsed = !this.collapsed;
        },

        _showAllOccurrences: function (e) {
            this.show_all_occurrences = '1';
            this.$.occurrences_form.submit();
        },

        _showDialog: function (e) {
          this.shadowRoot.querySelector('.flake_dialog').toggleDialog();
        }
      });
    })();
  </script>
</dom-module>
